<template>
  <div class="home">
    <!-- 头部导航 -->
    <van-nav-bar title="白云区华南快递">
      <template #left>
        <van-icon name="search" size="18" />
      </template>
      <template #right>
        <van-icon name="manager-o" size="18" v-if="isLongin" @click="btnMy" />
        <span class="user" v-else @click="btnLogin">登录|注册</span>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="item in navList">
          <div class="items">
            <div class="item" v-for="itemSon in item">
              <img :src="require('../assets/type/' + itemSon.image_url)" alt="">
              <span>{{ itemSon.title }}</span>
            </div>
          </div>
        </van-swipe-item>
        <!-- [ [1,2,3,4,5,6,7,8]   ,[9,1,2,23,34,54,56,6]           ] -->
      </van-swipe>
    </div>
    <!-- 附件商家 -->
    <div class="nearby-merchant">
      <div class="header">
        <van-icon name="location-o" />
        <span>附近商家</span>
      </div>

      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div class="merchant-card" v-for="item in shopList">
          <div class="merchant-image">
            <img :src="item.image_path" alt="商家图片">
          </div>
          <div class="merchant-info">
            <div class="merchant-title">
              <span class="tag">品牌</span>
              <span class="name">{{ item.name }}</span>
            </div>

            <div class="rating">
              <van-rate readonly allow-half color="#ffd21e" void-icon="star" void-color="#eee" v-model="item.rating" />
              <span class="monthly-sales">月售{{ item.recent_order_num }}</span>
            </div>

            <div class="price-info">
              <span class="price">{{ item.float_minimum_order_amount }}¥起送/配送费约{{ item.float_delivery_fee }}¥</span>
              <span class="distance">{{ item.distance }}/{{ item.order_lead_time }}</span>
            </div>


          </div>
        </div>
      </van-pull-refresh>




    </div>

    <tab></tab>


  </div>
</template>

<script>
import tab from '@/components/tab.vue';
import axios from 'axios';

export default {
  name: 'HomeView',
  data() {
    return {
      isLongin: false,
      navList: [],
      shopList: [],
      loading: true,
      active: 0
    }
  },

  methods: {
    btnLogin() {
      this.$router.push('/login')
    },
    btnMy() {
      this.$router.push('/my')
    },
    onRefresh() {
      // console.log('往下拉')
      axios.get('/shopping/restaurants?latitude=1.10&longitude=111.33').then((res) => {
        console.log(res.data)
        this.shopList = res.data
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      })

    }
  },
  components: {
    tab
  },
  created() {
    // 获取用户得登录信息
    let toknId = localStorage.getItem('userinfo');
    if (toknId) {
      this.isLongin = true;
    }

    // 获取食品分类数据
    axios.get('/v2/index_entry').then((res) => {

      let len = Math.ceil(res.data.length / 8);
      for (var i = 0; i < len; i++) {
        this.navList.push([])
      }
      // 旺二维数组里面加入数据
      res.data.map((item, index) => {
        let i = Math.floor(index / 8);
        this.navList[i].push(item)
      })

    })


    // 获取附件商家数据
    axios.get('/shopping/restaurants?latitude=1.10&longitude=111.33').then((res) => {
      console.log(res.data)
      this.shopList = res.data
    })

  }
}

</script>

<style lang="less">
.van-tabbar {
  height: 90px;
}

.nearby-merchant {
  width: 750px;
  background-color: #fff;
  margin-top: 20px;

  .header {
    width: 750px;
    height: 88px;
    padding: 0 30px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .van-icon {
      margin-right: 10px;
      color: #666;
      font-size: 36px;
    }

    span {
      font-size: 32px;
      font-weight: 500;
      color: #333;
    }
  }

  .merchant-card {
    width: 750px;
    display: flex;
    padding: 30px;
    box-sizing: border-box;

    .merchant-image {
      width: 160px;
      height: 160px;
      margin-right: 24px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
      }
    }

    .merchant-info {
      flex: 1;

      .merchant-title {
        margin-bottom: 25px;
        display: flex;
        align-items: center;

        .tag {
          background-color: #ffd21e;
          color: #333;
          font-size: 24px;
          padding: 4px 8px;
          border-radius: 4px;
          margin-right: 10px;
        }

        .name {
          font-size: 32px;
          font-weight: 500;
          color: #333;
        }
      }

      .rating {
        display: flex;
        align-items: center;
        margin-bottom: 25px;

        .van-rate {
          transform: scale(1.2);
          transform-origin: left center;
        }

        .monthly-sales {

          margin-left: 70px;
          font-size: 15px;
          color: #999;
        }
      }

      .price-info {
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;

        .price {
          font-size: 26px;
          color: #666;
        }
      }


    }
  }
}

.banner {
  width: 750px;
  height: 407px;
  // background-color: green;
  padding-top: 5px;
  box-sizing: border-box;

  .my-swipe {
    width: 750px;

    .items {
      display: flex;
      flex-wrap: wrap; // 折行
      width: 100vw;
      justify-content: space-between;

      .item {
        width: 187px; // 187*4 == 750 
        height: 181px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          height: 70px;

        }

        span {
          color: #5d5c5c;
          font-size: 22px;
        }
      }
    }
  }
}

.van-nav-bar__content {
  height: 88px !important;
  background-color: #3191e8;

  .van-nav-bar__title {
    color: #fff;
    font-size: 41px;
    font-weight: bold;
    height: 88px !important;
    line-height: 88px !important;
  }

  .van-icon-search {
    color: #fff !important;
    font-size: 42px !important;
  }

  .van-icon-manager-o {
    color: #fff !important;
    font-size: 42px !important;
  }

  .user {
    color: #fff;
    font-size: 35px !important;
  }
}

.bottom {
  height: 90px;
  background-color: #ffd21e;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
